<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="ma-content-block lg:flex justify-between p-4">

    <div class="lg:w-10/12 w-full lg:ml-4 mt-5 lg:mt-0">
      <!-- CRUD 组件 -->
      <ma-crud :options="crud" :columns="columns" ref="crudRef">

      </ma-crud>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import Api from '@/api/wx'
const crudRef = ref()

const crud = reactive({
  api: Api.getPageList,
  recycleApi: Api.getRecyclePageList,
  searchColNumber: 3,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationColumnWidth: 250,
  add: { show: true, api: Api.create},
  edit: { show: true, api: Api.save },
  delete: {
    show: true,
    api: Api.delete,
    realApi: Api.realDelete,
  },
  recovery: { show: true, api: Api.recovery},

  isDbClickEdit: false,
})

const wx_types = [
  { label: '本人', value: 0 },
  { label: '他人', value: 1 },
]
const columns = reactive([
  { title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true },
  {
    title: '微信昵称', dataIndex: 'nickname', width: 130, search: true,
    commonRules: [{ required: true, message: '微信昵称必填' }]
  },
  {
    title: '类型', dataIndex: 'type', width: 130, search: true,
    formType: 'radio',
    commonRules: [{ required: true, message: '类型必填' }],
    addDefaultValue: 0,
    dict: {
      data: wx_types, translation: true,
    },
    control: (val) => {
        return {
          owner: {display: 1 == val}
        }
    }
  },
  {
    title: '属于者', dataIndex: 'owner', width: 130,
    search: true
  },
  {
    title: '备注', dataIndex: 'remark', width: 180, hide: true,
    formType: 'textarea', labelWidth: '86px'
  }
])
</script>


<style scoped>

</style>
